<template>
	<view class="main" >
		<view class="card" v-for="(item,index) in list" :key="index">
			<view class="titles">
				<text class="title">
					标题内容
				</text>
				<text class="date">
					{{item.timecreatedpretty}}
				</text>
			</view>
			<view class="content">
				<view class="text" v-html="item.fullmessage">	

				</view>
			</view>
			<view class="info" @click="toInfo">
				<view class="left">
					{{ $t('message.details') }}
				</view>
				<uni-icons type="right" size="16" class="right" color="#DBDBDB"></uni-icons>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				height: 0,
				tabBarHeight: 0,
				page:1,
				list:[],
				total:0
			};
		},
		mounted() {
			this.height = uni.getSystemInfoSync().windowHeight - this.tabBarHeight
			this.getList()
		},
		onReachBottom() {
			let _self = this
			if(this.total == this.list.length){
				return
			}
			uni.showNavigationBarLoading()
			setTimeout(function() {
				_self.page++;
				_self.getList()
				uni.hideNavigationBarLoading()
			}, 500);
		},
		methods:{
			toInfo(){
				uni.navigateTo({
					url:"/pages/messageDetail/messageDetail"
				})
			},
			getList(){
				this.$httpRequest({
					url:"app/api/usermsg.php",
					method:"POST",
					data:{
						service:"moodle_mobile_app",
						page:this.page
					}
				}).then(res=>{
					this.total =res.total
					this.list = [...this.list,...res.data]
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {

		background: #F5F6FA;
		overflow: auto;
		width: 100%;

		.card {
			width: 90%;
			margin: 0 auto;
			height: 274rpx;
			background-color: #FFFFFF;
			border-radius: 20rpx;
			margin-top: 32rpx;
			
			.titles {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 32rpx 28rpx 16rpx;

				.title {
					font-size: 32rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #0F1826;
				}

				.date {
					font-size: 24rpx;
					font-family: PingFang TC-Regular, PingFang TC;
					font-weight: 400;
					color: #A9AFB8;

				}
			}

			.content {
				margin: 0 28rpx 20rpx;
				padding-bottom: 20rpx;
				font-size: 26rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #A9AFB8;
				line-height: 36rpx;
				border-bottom: 2rpx solid #EBEDF0;
				.text{
				width: 100%;	
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
				}
			}

			.info {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 28rpx 16rpx;
				.left{
					font-size: 28rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #0F1826;
				}
			
			}
		}
		.card:last-child{
			margin-bottom: 60rpx;
		}
	}
</style>
